<template>
  <transition name="el-zoom-in-center">
    <div class="cu-preview-main">
      <div class="cu-common-page-header assignment">
        <el-page-header @back="goBack" :content="'转让'" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="loading">确 定</el-button>
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-form ref="elForm" :model="dataForm" label-width="110px" label-position="right" style="margin-top: 20px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="校区品牌" prop="brand">
              <el-select v-model="dataForm.brand" placeholder="请选择校区品牌" @change="handleChangeBrand" filterable clearable required :style="{ width: '100%' }">
                <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="校区" prop="campusId">
              <el-select v-model="dataForm.campusId" placeholder="请选择" @change="handleChangeCampus" filterable clearable required :style="{ width: '80%' }">
                <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.fullName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="校区编码" prop="enCode">
              <el-input v-model="dataForm.enCode" :placeholder="'请输入校区编码'" disabled clearable required :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在区域" prop="contactList">
              <custom-address v-model="dataForm.area" clearable required disabled :styleWidth="{ width: '100%' }"></custom-address>
            </el-form-item>
          </el-col>
          <template v-for="(item, index) in dataForm.contactList">
            <el-col :key="'contactList.' + index + '.name'" :span="12">
              <el-form-item label="校区投资人" :prop="'contactList.' + index + '.name'">
                <el-input v-model="item.name" :placeholder="'请输入校区负责人'" disabled clearable required :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :key="'contactList.' + index + '.mobile'" :span="12">
              <el-form-item label="投资人电话" :prop="'contactList.' + index + '.mobile'">
                <el-input v-model="item.mobile" clearable required :style="{ width: '100%' }" disabled></el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <el-form ref="elSubForm" :model="submitForm" :rules="rules" label-width="110px" label-position="right">
        <el-row :gutter="12" class="main" :style="{ margin: '0 auto', width: '100%' }">
          <el-col :span="24">
            <el-form-item label-width="0">
              <groupTitle content-position="left" content="转让信息"></groupTitle>
            </el-form-item>
          </el-col>
          <el-row 
            v-for="(item, index) in submitForm.contacts" 
            :key="index" 
            class="investor-row"
          >
            <!-- 投资人标题 -->
            <el-col :span="24">
              <div class="investor-title">
                投资人{{ index + 1 }}
                <span @click="onDeleteManage(index)" v-if="submitForm.contacts.length > 1" class="delete-btn">×</span>
              </div>
            </el-col>

            <!-- 基本信息 -->
            <el-row :gutter="20" class="info-row">
              <el-col :span="8">
                <el-form-item
                  label="投资人"
                  :prop="'contacts.' + index + '.name'"
                  :rules="{
                    required: true,
                    message: '投资人姓名不能为空',
                    trigger: 'blur'
                  }"
                >
                  <el-input v-model="item.name" placeholder="请输入投资人姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item
                  label="签约类型"
                  :prop="'contacts.' + index + '.signingType'"
                  :rules="{
                    required: true,
                    message: '签约类型不能为空',
                    trigger: 'change'
                  }"
                >
                  <el-select v-model="item.signingType" placeholder="请选择" clearable @change="handleSigningTypeChange(item)">
                    <el-option label="个人签约" value="personal"></el-option>
                    <el-option label="企业签约" value="company"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item
                  label="性别"
                  :prop="'contacts.' + index + '.gender'"
                  :rules="{
                    required: true,
                    message: '性别不能为空',
                    trigger: 'change'
                  }"
                >
                  <el-select v-model="item.gender" placeholder="选择性别" clearable>
                    <el-option v-for="item in genderOptions" :key="item.enCode" :label="item.fullName" :value="item.enCode" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" class="info-row">
              <el-col :span="8">
                <el-form-item
                  label="联系电话"
                  :prop="'contacts.' + index + '.mobile'"
                  :rules="{
                    required: true,
                    message: '联系电话不能为空',
                    trigger: 'blur'
                  }"
                >
                  <el-input v-model="item.mobile" placeholder="请输入联系电话" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item
                  label="身份证号"
                  :prop="'contacts.' + index + '.idNumber'"
                  :rules="{
                    required: true,
                    message: '身份证号不能为空',
                    trigger: 'blur'
                  }"
                >
                  <el-input v-model="item.idNumber" placeholder="请输入身份证号" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="微信" :prop="'contacts.' + index + '.wechat'">
                  <el-input v-model="item.wechat" placeholder="请输入微信" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" class="info-row">
              <el-col :span="8">
                <el-form-item label="邮箱" :prop="'contacts.' + index + '.email'">
                  <el-input v-model="item.email" placeholder="请输入邮箱" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="是否签约人" :prop="'contacts.' + index + '.isSigner'">
                  <el-checkbox v-model="item.isSigner"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 企业签约信息 -->
            <template v-if="item.signingType === 'company'">
              <!-- 企业信息 -->
              <el-col :span="24">
                <div class="section-title">企业信息</div>
              </el-col>
              
              <el-row :gutter="20" class="info-row">
                <el-col :span="8">
                  <el-form-item
                    label="公司名称"
                    :prop="'contacts.' + index + '.companyName'"
                    :rules="{
                      required: item.signingType === 'company',
                      message: '公司名称不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input v-model="item.companyName" placeholder="请输入公司名称" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="注册地址"
                    :prop="'contacts.' + index + '.companyAddress'"
                    :rules="{
                      required: item.signingType === 'company',
                      message: '注册地址不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input v-model="item.companyAddress" placeholder="请输入注册地址" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="信用代码"
                    :prop="'contacts.' + index + '.creditCode'"
                    :rules="{
                      required: item.signingType === 'company',
                      message: '统一社会信用代码不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input v-model="item.creditCode" placeholder="请输入统一社会信用代码" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20" class="info-row">
                <el-col :span="8">
                  <el-form-item label="公司电话" :prop="'contacts.' + index + '.companyPhone'">
                    <el-input v-model="item.companyPhone" placeholder="请输入公司电话" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="公司邮箱" :prop="'contacts.' + index + '.companyEmail'">
                    <el-input v-model="item.companyEmail" placeholder="请输入公司邮箱" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 法人代表信息 -->
              <el-col :span="24">
                <div class="section-title">法人代表信息</div>
              </el-col>
              
              <el-row :gutter="20" class="info-row">
                <el-col :span="8">
                  <el-form-item
                    label="法人姓名"
                    :prop="'contacts.' + index + '.legalRepName'"
                    :rules="{
                      required: item.signingType === 'company',
                      message: '法人姓名不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input v-model="item.legalRepName" placeholder="请输入法人姓名" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="法人身份证"
                    :prop="'contacts.' + index + '.legalRepIdNumber'"
                    :rules="{
                      required: item.signingType === 'company',
                      message: '法人身份证号不能为空',
                      trigger: 'blur'
                    }"
                  >
                    <el-input v-model="item.legalRepIdNumber" placeholder="请输入法人身份证号" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="法人电话" :prop="'contacts.' + index + '.legalRepMobile'">
                    <el-input v-model="item.legalRepMobile" placeholder="请输入法人电话" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20" class="info-row">
                <el-col :span="8">
                  <el-form-item label="法人微信" :prop="'contacts.' + index + '.legalRepWechat'">
                    <el-input v-model="item.legalRepWechat" placeholder="请输入法人微信" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-row>
          <el-col :span="24">
            <el-form-item label="">
              <div class="title t-btn" @click="onAddManage">
                <span>+添加更多投资人</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转让时间" prop="time">
              <el-date-picker v-model="submitForm.time" :placeholder="'请选择转让时间'" clearable :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="转让说明" prop="description">
              <el-input v-model="submitForm.description" placeholder="请输入详细说明" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传附件" prop="appendix">
              <div class="s-div"><span class="s-tips">上传转让相关文件</span></div>
              <custom-upload-fz type="summarize" v-model="submitForm.appendix" :fileSize="500" sizeUnit="MB" :limit="9" buttonText="点击上传文件" :style="{ width: '300px' }"></custom-upload-fz>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="抄送邮箱" prop="emailTo">
              <org-select ref="user-org" buttonType="button" v-model="dataForm.emailTo" title="添加用户" class="mb-10" @change="onOrgChange" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </transition>
</template>
<script>
export { default } from './index.js'
</script>
<style scoped>
.el-time-spinner__wrapper {
  width: 100% !important;
}
/* @import url(index.scss); */

/* 企业信息相关样式 */
.section-title {
  font-size: 14px;
  font-weight: bold;
  margin: 15px 0 10px;
  color: #333;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}
.investor-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}
.investor-row {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.info-row {
  margin-bottom: 15px;
}
.t-btn {
  margin-top: 15px;
  color: #409eff;
  cursor: pointer;
}
.t-btn span {
  margin-right: 5px;
  color: #409eff;
}
.delete-btn {
  cursor: pointer;
  color: #F56C6C;
  font-size: 18px;
  font-weight: bold;
}
.error-height .el-form-item__error {
  position: static;
}
</style>
